<template>
  <div>
    <h1>我是首页</h1>
    <h1>来自store的问候：{{ $store.state.name }}</h1>
    <h1>来自store的问候：{{ state.name }}</h1>
    <button @click="add">number 的值是：{{ number }}</button>
    <h3>{{ state.count }}</h3>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useStore } from 'vuex'

export default {
  setup() {
    const store = useStore();
    const state = ref(store.state);
    const number = ref(0);
    const add = () => {
      number.value = number.value++;
      store.commit('increment')
      console.log("store 的值是：" + state.value.name);
    };
    onMounted(() => {
      console.log("number 的值是：" + number.value);
      console.log("store 的值是：" + state.value.name);
    })
    return {
      number: 0,
      add,
      state
    };
  },
};
</script>

<style scoped>

</style>
